<template>
  <div class="logo-title">LOGO配置</div>
  <!-- 详情 -->
  <div class="logo-detail" v-if="status == 'view'">
    <div class="logo-info">
      <a-space :size="16" direction="vertical" fill>
        <div class="logo-info-item flex">
          <div class="logo-info-label">企业LOGO：</div>
          <div class="logo-info-content">
            <a-image v-if="logoSrc" :src="logoSrc" width="80" :height="80" />
            <template v-else>-</template>
          </div>
        </div>
        <div class="logo-info-item flex">
          <div class="logo-info-label">企业简称：</div>
          <div class="logo-info-content"> {{ enterpriseDetail.briefName || '-' }} </div>
        </div>
      </a-space>
    </div>
  </div>
  <div class="logo-edit" v-else>
    <page-form v-if="form" :model="form" ref="formRef" layout="vertical">
      <page-form-row>
        <page-form-item label="企业LOGO">
          <template #extra>
            <a-space :size="6" direction="vertical">
              <p> 点击可更换LOGO </p>
              <p> 支持上传jpg/jpeg/png格式 </p>
              <!-- <p> 图片文件大小不超过 2MB </p> -->
              <p> 尺寸建议：宽104 * 高104 </p>
            </a-space>
          </template>
          <div class="logo-wrapper" @click="editLogoFn">
            <!-- 用户上传的 logo 图 -->
            <img :src="baseUrl + form.logoMiniFileId" v-if="form.logoMiniFileId" />
            <!-- 用户未上传 logo 图 -->
            <img src="./logo-imgs/logo.png" v-else />
          </div>
        </page-form-item>
        <page-form-item
          label="企业简称"
          field="briefName"
          required
          :rules="{ required: true, message: '请输入企业简称', trigger: 'change' }"
        >
          <i-input v-model="form.briefName" placeholder="请输入" :maxLength="5" />
        </page-form-item>
      </page-form-row>
      <page-form-row>
        <page-form-item label="默认LOGO">
          <div class="w-full">
            <div class="default-logo">
              <img src="./logo-imgs/logo_1.png" width="200" />
            </div>
            <div class="reset-btn">
              <a-button style="margin-top: 20px" @click="reDefaultFn">恢复默认</a-button>
            </div>
          </div>
        </page-form-item>
      </page-form-row>
    </page-form>
  </div>
  <!-- 编辑logo -->
  <logo-config-modal ref="logoEditModalRef" @ok="editLogoOkFn" />
</template>

<script setup name="EnterpriseLogoConfig">
  import { ref, watch, computed } from 'vue'
  import logoConfigModal from './logo-config-modal.vue'
  import { saveLogo } from '@/api/asset/enterprise.js'
  import useUserStore from '@/store/modules/user'
  const userStore = useUserStore()
  const baseUrl = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/`
  const props = defineProps({
    status: String,
    enterpriseDetail: Object,
  })
  const emit = defineEmits(['updateData'])
  const form = ref()
  const formRef = ref()
  watch(
    () => props.enterpriseDetail,
    (newVal) => {
      form.value = {
        epId: newVal.epId,
        // 企业简称
        briefName: newVal.briefName,
        // 企业logo
        logoMiniFileId: newVal.logoMiniFileId,
        // 企业logo图
        logoMiniImg: newVal.logoMiniImg,
      }
    },
    { immediate: true }
  )
  const logoSrc = computed(() => {
    let enterpriseDetail = props.enterpriseDetail
    if (enterpriseDetail.logoMiniFileId) {
      return `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${enterpriseDetail.logoMiniFileId}`
      // const url = `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${enterpriseDetail.logoMiniFileId}`
      // console.log('当前使用的是logoMiniFileId生成的路径:', url)
      // return url
    } else {
      return enterpriseDetail.logoMiniImg
    }
  })
  const defaultLogo = ref(false)
  const reDefaultFn = () => {
    defaultLogo.value = true
    // form.value.logoMiniFileId = null
    form.value.briefName = '华通商户'
  }
  const logoEditModalRef = ref()
  const editLogoFn = () => {
    // 此处接口传入的是详情中的
    logoEditModalRef.value.open(form.value.logoMiniFileId)
  }
  const editLogoOkFn = (fileId) => {
    form.value.logoMiniFileId = fileId
  }
  const saveFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          saveLogo(form.value)
            .then((res) => {
              if (res.code == 200) {
                userStore.setUser()
                emit('updateData')
                resolve()
              }
            })
            .catch(() => {
              reject()
            })
        }
      })
    })
  }

  defineExpose({
    saveFn,
  })
</script>

<style lang="less" scoped>
  .logo-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
    margin-bottom: 16px;
  }
  .logo-info-item {
    font-size: 14px;
    .logo-info-label {
      color: #4e5969;
      width: 90px;
      text-align: right;
    }
    .logo-info-content {
      color: #1d2129;
    }
  }
  .logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 104px;
    height: 104px;
    margin-right: 8px;
    margin-bottom: 8px;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
    .plus {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: rgba(0, 0, 0, 0.65);
      .plus-text {
        font-size: 14px;
        margin-top: 8px;
      }
    }
  }
</style>
